<template>
    <div class="layout" v-loading="loading">
        <div class="detail-head" v-if="detail">
            <el-row class="res-list white-block">
                <el-col :span="18">
                    <div class="title" v-if="detail&&detail.dir">
                        <span class="name ellipsis" :title="detail.dir.resName">{{detail.dir.resName}}</span>
                        <el-button class="minor limit ml10 text" size="mini" v-if="detail.dir.collectionSituation!=2">
                            {{detail.dir.resType==1?'服务接口类':(detail.dir.resType==2?'服务页面类':'数据交换类')}}
                        </el-button>
                        <el-button class="primary limit ml10 text" size="mini">
                            {{detail.dir.collectionSituation==1?'已归集':'未归集'}}
                        </el-button>
                    </div>
                    <div class="mt20" v-if="detail.detailsApi">
                        <span class="mr20">来源部门：{{detail.dir.resSourceDept}}</span>
                        <span class="mr20">接口状态：{{detail.dir.resState==1?'正常':'异常'}}</span>
                        <span>更新时间：{{detail.dir.modifyTime}}</span>
                    </div>
                    <div class="mt10" v-if="detail.dirData">
                        <span
                            class="mr20">资源唯一标识：{{detail.dir.resCode}}</span>
                        <span>来源部门：{{detail.dir.resSourceDept}}</span>
                    </div>
                </el-col>
                <el-col :span="6" class="text-right">
                    <template v-if="detail.dir.isRelease">
                        <el-button size="small" @click="addCart()" v-if="detail.dir.collectionSituation==1 && $routeNav.getAuth('power-addCart')">加入申请栏
                        </el-button>
                        <el-button type="primary" size="small" @click="submit()"
                                   v-if="detail.dir.collectionSituation==1 && $routeNav.getAuth('power-zysq')">
                            立即申请
                        </el-button>
                        <el-button type="primary" size="small" @click="submit(true)"
                                   v-if="detail.dir.collectionSituation==2 && $routeNav.getAuth('power-applyOnline')">
                            申请资源上线
                        </el-button>
                    </template>
                    <template v-else>
                        <el-button type="disabled" size="small">
                            已下架
                        </el-button>
                    </template>
                </el-col>
            </el-row>
        </div>
        <div class="mt20 box white-block" v-if="noDetail">
            <p>该资源无编目信息</p>
        </div>
        <!-- api资源详情 -->
        <div class="mt20 white-block" v-if="detail&&detail.detailsApi">
        <div class="tab-list">
            <div class="header">
                    <span v-for="(list,index) in tabApi" :key="index" @click="tabClick('tabApiStatus',index)"
                          :class="{'active': tabApiStatus==index}">{{list}}</span>
            </div>
            <div class="content">
                <div class="pane" v-if="tabApiStatus==0">
                    <div class="form-common mt30" v-if="detail.detailsApi">
                        <div class="form-item">
                            <div class="form-item-label">接口名称</div>
                            <div class="form-item-content" v-if="detail.dir">{{detail.dir.resName}}</div>
                        </div>
                        <div class="form-item">
                            <div class="form-item-label">创建时间</div>
                            <div class="form-item-content">{{detail.detailsApi.createTime}}</div>
                        </div>
                        <div class="form-item">
                            <div class="form-item-label">接口地址</div>
                            <div class="form-item-content">
                                {{detail.detailsApi.apiAddress}}
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="form-item-label">请求方式</div>
                            <div class="form-item-content">
                                <span v-if="detail.detailsApi.requestType==1">GET</span>
                                <span v-else-if="detail.detailsApi.requestType==2">POST</span>
                                <span v-else-if="detail.detailsApi.requestType==3">webService</span>
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="form-item-label">支持格式</div>
                            <div class="form-item-content">{{detail.detailsApi.supportFormat}}</div>
                        </div>
                        <div class="form-item">
                            <div class="form-item-label">接口说明</div>
                            <div class="form-item-content">{{detail.detailsApi.apiDesc}}</div>
                        </div>
                        <div class="form-item">
                            <div class="form-item-label">更新时间</div>
                            <div class="form-item-content">{{detail.detailsApi.modifyTime}}</div>
                        </div>
                        <div class="form-item">
                            <div class="form-item-label">资源说明</div>
                            <div class="form-item-content">{{detail.detailsApi.rdResourceDesc}}</div>
                        </div>
                    </div>
                </div>
                <div class="pane" v-if="tabApiStatus==1">
                    <div class="info">
                        <div class="title mt30">请求参数</div>
                        <table-example :data="requestParamInfo" :tableColumn="paramHeader"
                                       :slotColumns="slotColumns"
                                       class="mt20">
                            <template slot="necessary" slot-scope="scope">
                                <span>{{scope.row.necessary==1?'是':'否'}}</span>
                            </template>
                        </table-example>
                        <div class="title mt30">返回参数</div>
                        <table-example :data="returnParamInfo" :tableColumn="responseHeader"
                                       class="mt20">
                        </table-example>
                    </div>
                </div>
                <div class="pane" v-if="tabApiStatus==2">
                    <div class="example">
                        <div class="title mt30">请求示例</div>
                        <div>
                            {{detail.detailsApi.requestDemo}}
                        </div>
                        <div class="title mt30">返回示例</div>
                        <div>
                            {{detail.detailsApi.returnDemo}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <!-- 数据源资源详情 -->
        <div class="mt20 white-block" v-if="detail&&detail.dirData">
            <div class="tab-list">
                <div class="header">
                    <span v-for="(list,index) in tabOrigin" :key="index" @click="tabClick('tabOriginStatus',index)"
                          :class="{'active': tabOriginStatus==index}">{{list}}</span>
                </div>
                <div class="content">
                    <div class="pane" v-if="tabOriginStatus==0">
                        <div class="form-common mt30" v-if="detail.dirData">
                            <div class="form-item">
                                <div class="form-item-label">信息资源名称</div>
                                <div class="form-item-content" v-if="detail.dir">{{detail.dir.resName}}</div>
                            </div>
                            <div class="form-item">
                                <div class="form-item-label">资源唯一识别符</div>
                                <div class="form-item-content">
                                    {{detail.dir.resCode}}
                                </div>
                            </div>
                            <div class="form-item">
                                <div class="form-item-label">共享类型</div>
                                <div class="form-item-content">
                                    {{detail.dir.resPower==1?'公开':'受限'}}
                                </div>
                            </div>
                            <div class="form-item">
                                <div class="form-item-label">更新周期</div>
                                <div class="form-item-content">
                                    {{frequencyOptions | listFilter(detail.dir.updateFrequency, 'value', 'label')}}
                                </div>
                            </div>
                            <div class="form-item">
                                <div class="form-item-label">创建时间</div>
                                <div class="form-item-content">
                                    {{detail.dir.createTime}}
                                </div>
                            </div>
                            <div class="form-item">
                                <div class="form-item-label">最后更新时间</div>
                                <div class="form-item-content">
                                    {{detail.dir.modifyTime}}
                                </div>
                            </div>
                            <div class="form-item">
                                <div class="form-item-label">资源说明</div>
                                <div class="form-item-content">
                                    {{detail.dir.rdResourceDesc}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pane" v-if="tabOriginStatus==1">
                        <div class="info" v-if="detail.dirData">
                            <table-example :data="detail.dirData.dataItems" :tableColumn="dataItemHeader"
                                           :slotColumns="dirSlotColumns" class="mt20">
                                <template slot="fieldType" slot-scope="scope">
                                    <span v-if="scope.row.fieldType == 'char'">字符串</span>
                                    <span v-else-if="scope.row.fieldType == 'number'">数字</span>
                                    <span v-else-if="scope.row.fieldType == 'date'">日期</span>
                                    <span v-else-if="scope.row.fieldType == 'longtext'">不定长文本</span>
                                </template>
                                <template slot="keywords" slot-scope="scope">
                                    <span>{{scope.row.keywords==1?'是':'否'}}</span>
                                </template>
                            </table-example>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import tableExample from '../../components/table'

    export default {
        data() {
            return {
                tabApi: ['接口参数', '参数信息', '接口示例'],
                tabOrigin: ['基本信息', '数据项'],
                tabApiStatus: 0,
                tabOriginStatus: 0,
                // paramTableData: [], // 请求参数
                // responseTableData: [], // 返回参数
                paramHeader: [
                    {
                        prop: 'parameterName',
                        label: '参数名称',
                        minWidth: '30%',
                        align: 'center'
                    },
                    {
                        prop: 'type',
                        label: '类型',
                        minWidth: '20%',
                        align: 'center'
                    },
                    {
                        prop: 'necessary',
                        label: '是否必填',
                        minWidth: '20%',
                        align: 'center'
                    },
                    {
                        prop: 'explains',
                        label: '说明',
                        minWidth: '30%',
                        align: 'center'
                    }
                ],
                responseHeader: [
                    {
                        prop: 'parameterName',
                        label: '参数名称',
                        minWidth: '30%',
                        align: 'center'
                    },
                    {
                        prop: 'type',
                        label: '类型',
                        minWidth: '20%',
                        align: 'center'
                    },
                    {
                        prop: 'instanceValue',
                        label: '示例值',
                        minWidth: '20%',
                        align: 'center'
                    },
                    {
                        prop: 'explains',
                        label: '说明',
                        minWidth: '30%',
                        align: 'center'
                    }
                ],
                dataItemHeader: [
                    {
                        prop: 'englishName',
                        label: '英文名称',
                        minWidth: '20%',
                        align: 'center'
                    },
                    {
                        prop: 'chineseName',
                        label: '中文名称',
                        minWidth: '20%',
                        align: 'center'
                    },
                    {
                        prop: 'fieldType',
                        label: '字段类型',
                        minWidth: '15%',
                        align: 'center'
                    },
                    {
                        prop: 'fieldLength',
                        label: '字段长度',
                        minWidth: '15%',
                        align: 'center'
                    },
                    {
                        prop: 'fieldAccuracy',
                        label: '字段精度',
                        minWidth: '15%',
                        align: 'center'
                    },
                    {
                        prop: 'keywords',
                        label: '是否主键',
                        minWidth: '15%',
                        align: 'center'
                    }
                ],
                slotColumns: ['necessary'],
                dirSlotColumns: ['fieldType', 'keywords'],
                id: '',
                loading: false,
                detail: null,
                requestParamInfo: [],
                returnParamInfo: [],
                frequencyOptions: [
                    {
                        label: '',
                        value: null
                    },
                    {
                        label: '实时',
                        value: 1
                    },
                    {
                        label: '每小时',
                        value: 2
                    },
                    {
                        label: '每天',
                        value: 3
                    },
                    {
                        label: '每月',
                        value: 4
                    },
                    {
                        label: '每季度',
                        value: 5
                    },
                    {
                        label: '每半年',
                        value: 6
                    },
                    {
                        label: '每年',
                        value: 7
                    },
                    {
                        label: '不更新',
                        value: 8
                    },
                    {
                        label: '不定时',
                        value: 9
                    }
                ],
                noDetail: false
            }
        },
        mounted() {
            this.id = this.$route.params.id
            this.getData()
        },
        methods: {
            tabClick(name, index) {
                this[name] = index
            },
            getData(id) {
                this.loading = true
                this.$http.get('/rdResourceDir/getResInfo', {
                    id: this.id
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.detail = result.data
                        if (result.data.detailsApi === null && result.data.dirData === null) {
                            this.noDetail = true
                        } else {
                            this.noDetail = false
                            this.requestParamInfo = result.data.detailsApi.requestParamInfo
                            this.returnParamInfo = result.data.detailsApi.returnParamInfo

                            // result.data.detailsApi.requestParamInfo.forEach(item => {
                            //     if (!item.parameterType) {
                            //         this.requestParamInfo.push(item)
                            //     } else {
                            //         this.returnParamInfo.push(item)
                            //     }
                            // })
                        }
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            addCart() {
                this.$http.post('/rdResourceApplicationDetail/createNewApply', {
                    resId: this.detail.dir.id,
                    resName: this.detail.dir.resName,
                    resType: this.detail.dir.resType,
                    resSituation: 1 // 1 已归集 2 未归集
                }).then(result => {
                    if (result.success) {
                        this.$message.success({
                            message: result.data,
                            showClose: true
                        })
                    }
                })
            },
            submit(offLine) {
                this.$router.push({
                    path: '/res/submit',
                    query: {
                        idList: this.detail.dir.id,
                        offLine: offLine,
                        resType: this.detail.dir.resType,
                        collectionSituation: this.detail.dir.collectionSituation
                    }
                })
            }
        },
        components: {
            tableExample
        }
    }
</script>

<style scoped lang="less">
    .box {
        height: 200px;
        text-align: center;

        p {
            margin-top: 50px;
        }
    }

    .detail-head {
        .res-list {
            padding: 30px;
        }

        .title {

        }
    }

    .tab-list {
        .header {
            background-color: #eee;

            span {
                display: inline-block;
                padding: 10px 20px;
                cursor: pointer;

                &.active {
                    background-color: #ccc;
                }
            }
        }

        .content {
            .info {
                .title {
                    color: #999;
                }
            }
        }
    }

    .form-common {
        .form-item {
            margin-bottom: 20px;

            .form-item-label {
                width: 180px;
            }

            .form-item-content {
                margin-left: 180px;
            }
        }
    }
</style>
